<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>Bottom - Cascading Style Sheets Properties</TITLE>
     <link rel="stylesheet" type="text/css" href="../../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<br>
<center>
<table border=3 cellpadding=5 cellspacing=0>
<tr>
    <td rowspan=2><h1 class="pagetitle">bottom</h1>
    <b><a href="../../../misc/suppkey.htm">Support Key:</a></b>
    [<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE5</i></b>|<b class="s">N6</b>|<b class="s">O4</b>|<b class="s">S1</b>]<br></td>
    <td colspan=2 align=center><b class="alert">Other Positioning Properties</b><br></td>
</tr>
<tr>
    <td valign=top><a href="top.htm">top</a><br>
    <a href="right.htm">right</a><br>
    <a href="left.htm">left</a><br>
    <a href="vertalign.htm">vertical-align</a><br>
    <a href="overflow.htm">overflow</a><br></td>
    <td valign=top><a href="overflowx.htm">overflow-x</a><br>
    <a href="overflowy.htm">overflow-y</a><br>
    <a href="textoverflow.htm">text-overflow</a><br>
    <a href="clip.htm">clip</a><br>
    <a href="zindex.htm">z-index</a><br></td>
</tr>
<tr><td align=center colspan=3>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../../misc/email.htm">Brian Wilson</a> =</font><br>
</td></tr>
</table>
</center>

<div align="center">
<table cellpadding=5 cellspacing=0>
<tr>
    <td>&#160;&#160;<font size=2><a href="../../index.html">Main Index</a> |
        <a href="../../propindex/font.htm">Property Index</a> |
        <a href="../../supportkey/syntax.htm">CSS Support History</a> |
        <a href="../../../history/browsers.htm">Browser History</a></font>&#160;&#160;</td>
</tr>
</table>
</div>
<hr size=1 align="center" width="25%">

<br><br>
<table border=1 cellspacing=0 cellpadding=5>
<tr><td>
<table border=0 cellspacing=0 >
<tr>
    <th colspan=3 valign=bottom class="field"><big><u><b
        class="colheaders">&#160;&#160;&#160;Quick Statistics&#160;&#160;&#160;</b></u></big><br></th>
</tr>
<tr><th align=left><b class="l3heading">Default Value: </b><br></th>
    <td rowspan=6>&nbsp;&nbsp;</td>
    <td><b class="alert">auto</b></td></tr>
<tr><th align=left><b class="l3heading">Applicable Elements: </b><br></th>
    <td>Positioned Elements</td></tr>
<tr><th align=left><b class="l3heading">Inherit From Parent: </b><br></th>
    <td>No</td></tr>
<tr><th align=left><b class="l3heading">Applicable Media: </b><br></th>
    <td>Visual</td></tr>
<tr><th align=left><b class="l3heading">HTML Equivalent: </b><br></th>
    <td>NA<br></td></tr>
<tr><th align=left><b class="l3heading">Official Docs: </b><br></th>
    <td><a href="http://www.w3.org/TR/REC-CSS2/visuren.html#position-props">CSS2: Sect. 9.3.2</a>,
        <a href="http://www.w3.org/TR/CSS21/visuren.html#position-props">CSS2.1: Sect 9.3.2</a></td></tr>
</table>
</td></tr>
</table>

<dl>
<dt><big><b class="mainheading">What is it?</b></big>
    <dd>This describes the vertical offset for the bottom edge of the absolutely
        positioned element box from the bottom edge of the element's containing
        block. For relatively positioned boxes, the offsets are relative to where
        the box would appear normally in the document flow. Positive values are
        above the parent block's bottom edge and negative values are below.
</dl>

<dl>
<dt><br><big><b class="mainheading">Allowed Values</b></big>
<dt><b class="subheading">inherit</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">N6</i></b>|<b class="s">O5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Explicitly sets the value of this property to that of the parent.</dd>

<dt><b class="subheading">auto</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE5</i></b>|<b class="s">N6</b>|<b class="s">O4</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Default offset in the regular layout of the page.</dd>

<dt><b class="subheading">[length]</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE5</i></b>|<b class="s">N6</b>|<b class="s">O4</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Refers to an absolute distance from the reference containing block. Negative
        values are allowed.</dd>

<dt><b class="subheading">[percentage]</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE5</i></b>|<b class="s">N6</b>|<b class="s">O4</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Calculated</dd>
    <dd><b class="l3heading">Description:</b><br>
        Refers to a percentage of the height of the parent containing block. If
        the parent containing block does not have an explicit height, this value
        is interpreted like 'auto'.</dd>
</dl>

<dl>
<dt><big><b class="mainheading">Example</b></big>
    <dd><div class="example">Ext/Doc: <b class="selector">h2</b>
        { <span class="property">display:</span> block;
        <span class="property">position:</span> absolute;<br>
        <span class="property">top:</span> 20px;
        <span class="property">right:</span> 50px;
        <span class="property">bottom:</span> 20px;
        <span class="property">left:</span> 50px }</div>
    <dd><div class="example">In-Line:&#160; &lt;<b class="tagname">h2</b>
        <span class="tagattrib">STYLE</span>=&quot;<span
        class="property">display:</span> block;
        <span class="property">position:</span> absolute;<br>
        <span class="property">top:</span> 20px;
        <span class="property">right:</span> 50px;
        <span class="property">bottom:</span> 20px;
        <span class="property">left:</span>
        50px&quot;&gt;text&lt;/<b class="tagname">h2</b>&gt;</div>
</dl>

<big><b class="mainheading">Browser Peculiarities</b></big>
<ul>
    <li>Nothing to report.
</ul>

<br><br>
<a href="../../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>

</BODY>
</HTML>